<template>
	<view>
		<u-popup v-model="show" mode="center" :mask-close-able="false">
			<view class="popup-container">
				<image class="img" :src="gifUrl" mode="aspectFill"></image> 
				<view class="tip1">温馨提示</view>
				<view class="tip2">检测到枪未挂好，请挂好枪再充值</view>
				<view class="btn" :class="{'active':canTap}" @tap="close">确认挂好</view>
			</view>
		</u-popup>
	</view>
</template> 

<script>
	export default {
		data() {
			return {
				show:false,
				src:'',
				canTap: false,
				gifUrl:'', // gif图缓存
			}
		},
		mounted() {
			setTimeout(() => {
				this.canTap = true;
			},1500)
			// 读取缓存图片
			uni.getSavedFileList({
				success: (res) => {
					console.log(res);
					if(!res.fileList.length) {
						this.gifUrl = 'http://img.etubang.com/group1/M00/00/48/rBCky1-mWsWACZafAA6-ZoXP3HM323.gif';
					} else {
						this.gifUrl = res.fileList[0].filePath;
					}
				}
			})
		},
		methods:{
			open() {
				this.show = true;
			},
			close() {
				if(this.canTap) {
					this.show = false;
				};
			}
		}
	}
</script>

<style lang="scss">
	.popup-container {
		width: 580rpx;
		height: 840rpx;
		background-color: #FFFFFF;
		padding: 30rpx 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: relative;
		overflow: auto;
		.title {
			font-size: 32rpx;
			font-weight: 600; 
			padding-top: 34rpx;
		}
		
		.img {
			width: 500rpx;
			height: 500rpx;
			border-radius: 10rpx;
		}
		
		.tip1 {
			color: #333333;
			font-size: 36rpx;
			font-weight: 600;
		}
		
		.tip2 {
			font-size: 28rpx;
			color: #999999;
		}
		
		.btn {
			width: 500rpx;
			line-height: 86rpx;
			background-color: #EEEEEE;
			text-align: center;
			color: #FFFFFF;
			margin-bottom: 30rpx;
			
			&.active {
				background: linear-gradient(0deg,#34E7A9,#11CC8A);
				box-shadow: 0rpx 2rpx 1rpx 1rpx #35A880;
			}
		}
		
		.close {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			bottom: -70rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 999;
			background-color: red;
		}
	}
</style>
